<template>
  <div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="(item,index) in list" :key="index">
          <img :src="item">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
  
</template>

<script>
export default {
    name:'Homeswiper',
    props:['list'],
    computed:{
      showSwipe(){
        return this.list.length;
      }
      
    },
    data() {
      return {
        swiperOption: {
          loop:true,
          pagination: {
            el: '.swiper-pagination'
          }
        }
       
      }
    }
}
</script>

<style scoped lang="stylus">
  .wrapper >>> .swiper-pagination-bullet-active
    background  #fff !important
  .wrapper
    height  0
    overflow  hidden
    padding-bottom  26.666%
    .swiper-slide img{
        width 100%
        height auto
    }
</style>